<!--区域热力层配置表单-->

<template>
  <div class="">
    <Form :label-width="100">
      <FormItem label="名称">
        <Input size="small" v-model="obj.name"/>
      </FormItem>
      <FormItem label="数据源对应值">
        <Input size="small" v-model="obj.datasourceKey" placeholder="datasourceKey"/>
      </FormItem>

      <Collapse :style="{marginTop: '5px'}">
        <Panel name="1">
          提示信息(Tooltip)配置
          <div slot="content">
            <FormItem label="显示位置">
              <Select :transfer="true" size="small" v-model="obj.tooltip.position">
                <Option value="inside">inside</Option>
                <Option value="top">top</Option>
                <Option value="left">left</Option>
                <Option value="right">right</Option>
                <Option value="bottom">bottom</Option>
              </Select>
            </FormItem>
            <FormItemPanel title="格式化">
              <Alert style="padding: 8px;">
                通过编写HTML代码对提示框进行自定义，<a href="https://echarts.apache.org/next/zh/option.html#series-map.tooltip.formatter" target="_blank">参考资料</a>
              </Alert>
              <CodeEditor v-model="obj.tooltip.formatter" mode="html"></CodeEditor>
            </FormItemPanel>
            <FormItem label="背景颜色">
              <PnColorPicker size="small" v-model="obj.tooltip.backgroundColor" alpha recommend/>
            </FormItem>
            <FormItem label="边框颜色">
              <PnColorPicker size="small" v-model="obj.tooltip.borderColor" alpha recommend/>
            </FormItem>
            <FormItem label="边框大小">
              <InputNumber size="small" :max="1000" :min="0" v-model="obj.tooltip.borderWidth"></InputNumber>
            </FormItem>
            <FormItem label="内边距">
              <InputNumber size="small" :max="1000" :min="0" v-model="obj.tooltip.padding"></InputNumber>
            </FormItem>
          </div>
        </Panel>
        <Panel name="2">
          视觉映射组件
          <div slot="content">
            <slot name="visualMapSettingForm"></slot>
          </div>
        </Panel>
        <Panel name="100">
          静态数据
          <div slot="content">
            <CodeEditor v-model="staticData" mode="json" @on-submit-change="updateData"></CodeEditor>
          </div>
        </Panel>
      </Collapse>

    </Form>
  </div>
</template>

<script>

  export default {
    name: "CPMSeriesMapSettingForm",
    props: {
      value: {
        type: Object
      }
    },
    data() {
      return {
        obj: this.value,
        staticData: null
      }
    },
    mounted() {
      this.staticData = JSON.stringify(this.obj.data, null, 2);
    },
    methods: {
      updateData () {
        this.obj.data = JSON.parse(this.staticData)
      }
    },
    computed: {

    },
    watch: {
      value (val) {
        this.obj = val;
      },
      obj (val) {
        this.$emit('input', val);
      }
    }
  }
</script>

<style scoped>

</style>
